<template>
	<view class="content">
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<button type="primary" style="background: #FFE226;color:#000 ;" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<!-- <button type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button> -->
				</view>
			</view>
		</view>
		<!-- <button type="primary" @tap="shareFc()">生成海报</button> -->
		<!-- 显示用的海报 -->
		
		<view class="wrapper">
			<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/posterLogo.png" class="posterLogo"></image>
			<view class="wrapper-content">
				<view class="wrapper-header">
					<image :src="articleInfo.photo_url" mode="aspectFill"></image>
					<view class="nick-name">{{articleInfo.user_name}}</view>
				</view>
				
				<view class="wrapper-tag">
					<view>{{articleInfo.circle_name}}</view>
					<view>{{articleInfo.classify_name}}</view>
				</view>
				<view class="wrapper-time">
					{{articleInfo.created_at}}
				</view>
				<view class="wrapper-main">
					<image src="../../static/img/shareIcon.png" mode="widthFix"></image>
					<view>
						<!-- {{content}} -->
						<view v-if="articleInfo.type=='vote'" >
							<u-parse class="content-text-a" noData=" " :content="articleInfo.voteContent" @preview="preview" @navigate="navigate"/>
						</view>
						<view v-else>{{articleInfo.content}}</view>
					</view>
					
					<!-- 图片帖 -->
					<view class="img-list-wrapper" v-if="articleInfo.img_url_array.length!=0&&articleInfo.img_url_array.length==1">
						<image mode="widthFix" @load="loadImgList" class="img-list" :src="item" v-for="(item,index) of articleInfo.img_url_array" :key="index"></image>
					</view>
					<view class="img-list-wrapper-lot" v-if="articleInfo.img_url_array.length!=0&&articleInfo.img_url_array.length>1">
						<image mode="aspectFill" @load="loadImgList" class="img-list" :src="item" v-for="(item,index) of articleInfo.img_url_array" :key="index"></image>
					</view>
					<!-- 图片帖end -->
					
					<!-- 投票帖 -->
					<view class="vote-options" v-if="articleInfo.type=='vote'">
							<radio-group>
								<view v-for="(item,index) of articleInfo.vote_option" :key="index" class="vote-wrapper">
									<view class="radio" >
										<img :src="item.img_url" v-if="item.img_url" alt="" mode="aspectFill" class="thumb">
										<view class="content">{{item.name}}</view>
										<radio disabled color="rgba(255,226,38,1)"/>
									</view>
								</view>
							</radio-group>
					</view>
					<!-- 投票帖end -->
				</view>
				<view class="wrapper-bottom">
					<view class="divide"></view>
					<view class="wrapper-bottom-left">
						<view class="from">扫码进入哔哔机</view>
						<view>这是一个年轻人瞎哔哔的圈子</view>
					</view>
					<view class="wrapper-bottom-right">
						<image :src="qrcode" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="btn-wrapper">
				<button type="primary" size="mini" class="share" @click="shareFc">保存海报</button>
				<button type="primary" size="mini" open-type="share">分享给好友</button>
			</view>
		</view>
		<!-- 显示用的海报end -->
		
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import _app from '@/utils/QS-SharePoster/app.js';
	import uParse from '@/components/gaoyia-parse/parse.vue'
	import {
		getSharePoster
	} from '@/utils/QS-SharePoster/QS-SharePoster.js';
	export default {
		data() {
			return {
				content:'据BBC12月27日报道，因气候变暖，全球已有一半以上的珊瑚因白化死亡。也许你会觉得这个消息是骇人听闻，然而这却是人类面临的现实。而且随着全球气候的不断回温，变暖。大部分珊瑚2050年或灭绝。',
				poster: {},
				post_article_id:'',
				articleInfo:'',
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				qrcode:'',
				userInfo:{},
				rpx:1,
				hasLoadImgNum:0,//已加载的图片数
				wrapperH:'',//canvas的高
				contentH:'',//白框的高
				
				//投票帖
				voteHeader:'<img style="width:40rpx;height:40rpx;display: inline-block;vertical-align: top;" src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/invitation-vote.png" alt=""><span style="color:#128FFF; margin-right:10px">投票</span>'
			}
		},
		components:{uParse},
		onLoad(options) {
			// uni.clearStorage();
			let systemInfo=uni.getSystemInfoSync()
			this.post_article_id = options.post_article_id||97;//10
			this.rpx=systemInfo.screenWidth/375;
			this.getArticleDetail();
			this.getShareQrCode();
			this.getImgsHW()
			
		},
		onShareAppMessage(){
		   return {
		    title: '哔哔机',
		    desc:'哔哔机',
			path: `/pages/Details/postdetails?post_article_id=${this.post_article_id}`
		  }
		},
		methods: {
			loadImgList(){
				//加载完图片列
				this.hasLoadImgNum++;
				console.log(this.articleInfo)
				if(this.hasLoadImgNum==this.articleInfo.img_url_array.length){
					this.getImgsHW()
				}
			},
			getImgsHW(){
				
				var query = wx.createSelectorQuery();
				    //选择id
				    var that = this;
				    query.select('.wrapper-content').boundingClientRect(function (rect) {
						//获取白框内容的宽高
				      that.contentH=parseFloat(rect.height)*2>800*that.rpx?parseFloat(rect.height)*2:800*that.rpx;
					  // console.log(rect,that.rpx,parseFloat(rect.height))
					  that.contentH+=280
				     
				    }).exec();
					query.select('.wrapper').boundingClientRect(function (rect) {
						//获取canvas内容的宽高
					  that.wrapperH=parseFloat(rect.height)*2>1334*that.rpx?parseFloat(rect.height)*2:1334*that.rpx;
					  that.wrapperH+=180
					 
					}).exec();

			},
			async getUserInfo(){
				//获取用户信息
				
				let userToken=uni.getStorageSync('userToken');
				if(!userToken){
					return
				}
				let res=await this.$api.getUserInfo({user_token:userToken});
				if(res.data.level=='success'){
					this.userInfo=res.data.data
					
				}
			},
			formatContent(text){
				//去除标签
				let pattern=/<img.*?alt="(.*?)".*?>/gi;
				let text1=text.replace(pattern,'$1'||'');
				
				let pattern1=/<img.*?>/gi;
				text1=text.replace(pattern1,'');
				
				let pattern2=/<a.*?>(.*?)<\/a>/gi;
				text1=text1.replace(pattern2,'$1');
				return text1
			},
			formatVoteContent(text){
				//格式化投票的头部
				let newText='';
				
				if(text.indexOf(this.voteHeader)!=-1){
					newText=text.replace(this.voteHeader,'')
				}
				console.log(newText)
				return newText
			},
			async getShareQrCode(){
				let _this=this
				wx.downloadFile({
				  url: `${this.$api.BASE_URL}circle/getShareQrCode?user_token=${uni.getStorageSync('userToken')}&post_article_id=${this.post_article_id}`, //仅为示例，并非真实的资源
				  success (res) {
				    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
				    if (res.statusCode === 200) {
				      _this.qrcode=res.tempFilePath;
				    }
				  }
				})
			},
			//获取帖子详情
			async getArticleDetail(){
			    let params = {
			        article_id : this.post_article_id,
			        user_token: uni.getStorageSync('userToken')
			    }
			    const res = await this.$api.getArticleDetail(params);
			    if (res.data.level == 'success'){
			        this.articleInfo = res.data.data;
					if(res.data.data.content){
						let content=res.data.data.content
						
						if(res.data.data.type=='vote'){
							//投票帖，删除头部
							content=this.formatVoteContent(content)
							this.articleInfo.voteContent=res.data.data.content
						}
						this.articleInfo.content=this.formatContent(content);
						//模拟数据
						// this.articleInfo.img_url_array.push('https://ciy.oss-cn-shenzhen.aliyuncs.com//web/bibiji/2020/1/13/f02a683c3f6f340851dda5added72d90.jpg')
						// this.articleInfo.img_url_array.push('https://ciy.oss-cn-shenzhen.aliyuncs.com//web/bibiji/2020/1/19/f056746e26970111fd09c6a8b2be8f8a.jpg')
					}
			    } else {
			        uni.showToast({
			            icon:'none',
			            title:res.data.message
			        })
			    }
				console.log(this.articleInfo.photo_url)
			},
			async shareFc() {
				try {
					console.log('准备生成:' + new Date())
					// console.time('计算海报生成时间');
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: this.canvasId,	//canvasId
						delayTimeScale: 20, //延时系数
						background: {
							width: 750*this.rpx,
							height: this.wrapperH,
							// backgroundColor: '#666'
						},
						drawArray: async({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							
							const rpx=this.rpx;
							const wrapperH=this.wrapperH;
							const contentH=this.contentH;
							let articleH='';//文章的高度
							const img_url_array=this.articleInfo.img_url_array;//图片列
							let imageHeader={//头图的信息
								dx: 20*rpx,
								dy: 20*rpx,
								dWidth: 132*rpx,
								dHeight: 40*rpx,
							}
							
							console.log(wrapperH,contentH,5555)
							let drawArray=[
								//背景
								{
									type: 'image',
									url: 'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/rank-bgk.png',
									// alpha: .3,
									dx: 0,
									dy: 0,
									serialNum:0,
									infoCallBack(imageInfo) {
										let scale = bgObj.width * 0.2 / imageInfo.height;
										return {
											dWidth: 750*rpx,
											dHeight: wrapperH,
										}
									}
								},
								{
									//logo
									type: 'image',
									url: 'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/posterLogo.png',
									// alpha: .3,
									dx: 20*rpx,
									dy: 20*rpx,
									serialNum:0,
									infoCallBack(imageInfo) {
										
										return {
											dWidth: 132*rpx,
											dHeight: 40*rpx,
										}
									}
								},
								//白色背景
								{
									type: 'custom',
									setDraw(Context) {
										Context.setFillStyle('black');
										// Context.setGlobalAlpha(0.3);
										let 
										x=imageHeader.dx,
										y=imageHeader.dy+imageHeader.dHeight+50,
										width=bgObj.width-2*x,
										height=contentH*bgScale,radius=10;
										// console.log(height,scale,1111)
										Context.beginPath();
										Context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
										Context.lineTo(width - radius + x, y);
										Context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
										Context.lineTo(width + x, height + y - radius);
										Context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
										Context.lineTo(radius + x, height +y);
										Context.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
										Context.closePath();
										Context.setFillStyle('#fff')
										Context.fill()
										Context.setFillStyle('#F7F7F7')
										Context.fillRect(x+20, y+height-150, width-40, 20);
									},
									serialNum:-1000,
									id:'whiteBg'
								},
								
								//头像
								{
									type: 'image',
									url: this.articleInfo.photo_url,
									// alpha: .3,
									dx:bgObj.width*0.05,
									dy: 70+50,
									infoCallBack(imageInfo) {
										let scale = bgObj.width * 0.2 / imageInfo.height;
										return {
											circleSet: {
												x: imageInfo.width * scale / 2,
												y: bgObj.width * 0.2 / 2,
												r: bgObj.width * 0.2 / 2
											}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
											dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
											dHeight: bgObj.width * 0.2,
											/* roundRectSet: { // 圆角矩形
												r: imageInfo.width * .1
											} */
										}
									}
								},
								//昵称
								{
									type: 'text',
									// fontStyle: 'italic',
									text: this.articleInfo.user_name,
									size: fontSize,
									// color: 'white',
									// alpha: .5,
									textAlign: 'left',
									textBaseline: 'middle',
									
									infoCallBack(textLength) {
										_app.log('index页面的text的infocallback ，textlength:' + textLength);
										return {
											dx:bgObj.width*0.25+10 ,
											dy: 70+bgObj.width * 0.2 /2+50,
											
										}
									},
									
									serialNum: 0,
									// id: 'tag1'	//自定义标识
								},
								
								
								
								//标签1
								{
									type: 'text',
									// fontStyle: 'italic',
									text: this.articleInfo.circle_name,
									fontWeight: 'bold',
									size: fontSize,
									// color: 'white',
									// alpha: .5,
									textAlign: 'left',
									textBaseline: 'middle',
									infoCallBack(textLength) {
										_app.log('index页面的text的infocallback ，textlength:' + textLength);
										return {
											dx:bgObj.width*0.05,
											dy: 70+bgObj.width * 0.3+50,
										}
									},
									serialNum: 0,
									id: 'tag1'	//自定义标识
								},
								//标签2
								{
									type: 'text',
									text: this.articleInfo.classify_name,
									fontWeight: 'bold',
									size: fontSize,
									// color: 'white',
									// alpha: .75,
									textAlign: 'left',
									textBaseline: 'middle',
									serialNum: 1,
									allInfoCallback({	//v3.0.1 更新 可以获取drawArray中全部数据
										drawArray
									} = {}) {
										const obj = drawArray.find(item => item.id === 'tag1');
										return {
											dx: obj.dx+obj.textLength+20,
											dy: obj.dy
										}
										//也可以return promise对象
										// return new Promise((rs, rj) => {
										// 	setTimeout(() => {
										// 		rs({
										// 			dx: obj.dx+obj.textLength+20,
										// 			dy: obj.dy 
										// 		});
										// 	}, 1);
										// });
									},
									id: 'tag2'
								},
								//标签3
								// {
								// 	type: 'text',
								// 	text: '背景大学',
								// 	fontWeight: 'bold',
								// 	size: fontSize,
								// 	// color: 'white',
								// 	// alpha: .75,
								// 	textAlign: 'left',
								// 	textBaseline: 'middle',
								// 	serialNum: 1,
								// 	allInfoCallback({	//v3.0.1 更新 可以获取drawArray中全部数据
								// 		drawArray
								// 	} = {}) {
								// 		const obj = drawArray.find(item => item.id === 'tag1');
								// 		const obj2 = drawArray.find(item => item.id === 'tag2');
								// 		console.log(obj,7777)
								// 		/* return {
								// 			dx: obj.dx,
								// 			dy: obj.dy + lineHeight
								// 		} */
								// 		//也可以return promise对象
								// 		return new Promise((rs, rj) => {
								// 			setTimeout(() => {
								// 				rs({
								// 					dx: obj.dx+obj.textLength+obj2.textLength+40,
								// 					dy: obj.dy 
								// 				});
								// 			}, 500);
								// 		});
								// 	},
								// 	id: 'tag3'
								// },
								
								//时间
								{
									type: 'text',
									// fontStyle: 'italic',
									text: this.articleInfo.updated_at,
									size: 26,
									color: '#BBBCBF',
									// alpha: .5,
									textAlign: 'left',
									textBaseline: 'middle',
									
									infoCallBack(textLength) {
										_app.log('index页面的text的infocallback ，textlength:' + textLength);
										return {
											dx:bgObj.width*0.05,
											dy: 70+bgObj.width * 0.3+90,
											
										}
									},
									
									serialNum: 0,
									// id: 'tag1'	//自定义标识
								},
								
								{
									type: 'image',
									url: '/static/img/shareIcon.png',
									// alpha: .3,
									dx:bgObj.width*0.05,
									dy: 70+bgObj.width * 0.3+130,
									infoCallBack(imageInfo) {
										let scale = bgObj.width * 0.2 / imageInfo.height;
										return {
											dWidth: imageInfo.width * scale/4,
											dHeight: bgObj.width * 0.2/4,
										}
									}
								},
								
								//文章
								{
									type: 'text',
									// fontStyle: 'italic',
									text: this.articleInfo.content,
									// text: this.content,
									size: 24,
									// color: 'white',
									// alpha: .5,
									lineFeed: {
									        maxWidth: bgObj.width*0.9,
									        lineHeight: 50,
									        lineNum: -1,
									        dx: -1
									    },
									textAlign: 'left',
									textBaseline: 'middle',
									infoCallBack(textLength) {
										articleH=textLength/bgObj.width*0.9*50+70+bgObj.width * 0.3+260
										// _app.log('index页面的text的infocallback ，textlength:' + textLength);
										return {
											dx:bgObj.width*0.05,
											dy: 70+bgObj.width * 0.3+230,
										}
									},
									serialNum: 0,
									id: 'tag1'	//自定义标识
								},
								
								{
									type: 'image',
									url: this.qrcode,
									// alpha: .3,
									dx: bgObj.width * 0.85,
									dy: imageHeader.dy+imageHeader.dHeight+contentH*bgScale-70,
									infoCallBack(imageInfo) {
										let scale = bgObj.width * 0.2 / imageInfo.height;
										return {
											dWidth: imageInfo.width * scale/1.8,
											dHeight: bgObj.width * 0.2/1.8,
										}
									}
								},
								{
									type: 'text',
									// fontStyle: 'italic',
									text: '来自哔哔机',//长按识别小程序码匿名留言
									size: 24,
									// color: 'white',
									// alpha: .5,
									lineFeed: {
									        maxWidth: bgObj.width*0.9,
									        lineHeight: 50,
									        lineNum: -1,
									        dx: -1
									    },
									textAlign: 'left',
									textBaseline: 'middle',
									infoCallBack(textLength) {
										// _app.log('index页面的text的infocallback ，textlength:' + textLength);
										return {
											dx:imageHeader.dx+20,
											dy: imageHeader.dy+imageHeader.dHeight+contentH*bgScale-60,
										}
									},
									serialNum: 0,
									id: 'tag1'	//自定义标识
								},
								{
									type: 'text',
									// fontStyle: 'italic',
									text: '长按识别小程序码匿名留言',//
									size: 24,
									// color: 'white',
									// alpha: .5,
									lineFeed: {
									        maxWidth: bgObj.width*0.9,
									        lineHeight: 50,
									        lineNum: -1,
									        dx: -1
									    },
									textAlign: 'left',
									textBaseline: 'middle',
									infoCallBack(textLength) {
										// _app.log('index页面的text的infocallback ，textlength:' + textLength);
										return {
											dx:imageHeader.dx+20,
											dy: imageHeader.dy+imageHeader.dHeight+contentH*bgScale-30,
										}
									},
									serialNum: 0
								},
								
							]
							
							
						let arr=this.articleInfo.img_url_array.map((item,index)=>{
								 return new Promise((resolve)=>{
									 uni.getImageInfo({
									 	src:item,
									 	success:function(res) {
											res.url=item
									 		resolve(res)
									 	}
									 })
								 })
							})
							let imgListDy=0;
							let imgWH=750*rpx*.75/3.3
							let result=await Promise.all(arr);
							if(result.length==1){
								drawArray.push(
									{
										type: 'image',
										url: result[0].url,
										infoCallBack(imageInfo) {
											// let scale = bgObj.width * 0.2 / imageInfo.height;
											let width=bgObj.width-2*imageHeader.dx;
											let dx=imageHeader.dx;
											imgListDy=articleH+10

											return {
												dx: dx,
												dy: imgListDy,
												dWidth:width ,
												dHeight: result[0].height*(width/result[0].width)
											}
										}
									}
								)
								return new Promise((rs, rj) => {
									rs(
										drawArray
									);
								})
							}
							
							// 多图
							let imgListDx=0;
							result.forEach((item,index,list)=>{
								drawArray.push(
									{
										type: 'image',
										url: item.url,
										infoCallBack(imageInfo) {
											// let scale = bgObj.width * 0.2 / imageInfo.height;
											let width=bgObj.width-2*imageHeader.dx;
											
											if(index==0){
												imgListDy=articleH+10;
												imgListDx=imageHeader.dx
											}
											if(index%3==0 &&index!=0){
												imgListDx=imageHeader.dx
												imgListDy=imgListDy+imgWH
											}
											if(index%3!=0){
												
												imgListDx+=imgWH
											}
											console.log(index,dx,imgListDy,imgWH)
											
											var clip_left, clip_top, //左偏移值，上偏移值，
											          clip_width, clip_height; //截取宽度，截取高度
											
											        clip_height = item.width ;
											        if (clip_height > item.height) {
											          clip_height = item.height;
											          clip_width = clip_height ;
											          clip_left = (item.width - clip_width) / 2;
											          clip_top = 1;
											        } else {
											          clip_left = 1;
											          clip_top = (item.height - clip_height) / 2;
											          clip_width = item.width
											        }
											return {
												dx: imgListDx,
												dy: imgListDy,
												dWidth:imgWH ,
												dHeight: imgWH,
												sWidth:clip_width,
												sHeight:clip_height,
												sx:clip_left,
												sy:clip_top
											}
										}
									}
								)
							})
							
							console.log(result)
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs(
									drawArray
								);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					console.timeEnd('计算海报生成时间结果');
					console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.poster.finalPath = d.poster.tempFilePath;
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			share() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif
				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},
			hideQr() {
				this.qrShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.vote-options{
		//投票样式
		$padding:10rpx;
		radio-group{
			width: 100%;
		}
		.vote-wrapper{
			margin:15rpx 0;
			width: 100%;
		}
		.radio{
			
			padding:$padding;
			min-height: 100rpx;
			border-radius:8px;
			
			border:4rpx solid rgba(217,217,217,1);
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
		}
		.radio-activity{
			border:4rpx solid rgba(255,226,38,1);
		}
		.thumb{
			width: 100rpx !important;
			height: 100rpx !important;
			border-radius: 8rpx;
			margin-right: $padding;
		}
		.content{
			flex:1;
			margin-bottom: $padding;
			font-size:32rpx;
		}
		.vote-btn{
			background-color: #FFE226;
			width:280rpx;
			height:88rpx;
			line-height: 88rpx;
			background:rgba(255,226,38,1);
			border-radius:6px;
			text-align: center;
			font-weight: 600;
			margin: 20rpx auto ;
		}
		
	}
	.hideCanvasView {
		position: relative;
	}
	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}
	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}
	.flex_column {
		display: flex;
		flex-direction: column;
	}
	.backgroundColor-white {
		background-color: white;
		max-height: 60vh;
		overflow: scroll;
	}
	.border_radius_10px {
		border-radius: 10px;
	}
	.padding1vh {
		padding: 1vh;
	}
	.posterImage {
		width: 60vw;
	}
	.flex_row {
		display: flex;
		flex-direction: row;
	}
	.marginTop2vh {
		margin-top: 2vh;
	}
	
	
	.wrapper{
		min-height: calc(100vh - 150rpx);
		width: 100%;
		background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/rank-bgk.png');
		background-size:100% 100%;
		padding-bottom: 150rpx;
		.posterLogo{
			width: 240rpx;
			height: 74rpx;
			margin: 40rpx 20rpx;
		}
		.wrapper-content{
			position: relative;
			border-radius: 20rpx;
			background: #fff;
			margin:1rpx 20rpx 40rpx 20rpx;
			padding:60rpx;
			box-sizing: border-box;
			min-height: 80vh;
			.wrapper-header{
				@include flex(flex-start);
				image{
					width:100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
				.nick-name{
					font-size:28rpx;
					font-weight: 600;
					margin-left:14rpx;
				}
			}
			.wrapper-tag{
				@include flex(flex-start);
				view{
					margin-right:20rpx;
					background: #F7F7F7;
					border-radius: 8rpx;
					padding: 10rpx;
					font-size: 24rpx;
				}
				margin:26rpx 0;
				/*font-weight: 600;*/
			}
			.wrapper-time{
				font-size: 26rpx;
				color:rgba(187,188,191,1);
				line-height: 26rpx;
			}
			.wrapper-main{
				margin-top: 72rpx;
				image{
					width:50rpx;
					height: 50rpx;
				}
				view{
					margin-top:24rpx;
					font-size:32rpx;
					line-height:48rpx;
				}
				.img-list-wrapper{
					padding-bottom: 120rpx;
				}
				.img-list-wrapper-lot{
					width: 100%;
					padding-bottom: 120rpx;
					image{
						width: 25vw;
						height: 25vw;
					}
				}
				.img-list{
					width: 100%;
					
				}
			}
			.wrapper-bottom{
				width: calc(100% - 120rpx);
				position: absolute;
				bottom: 20rpx;
				@include flexWrap(space-between);
				.divide{
					width:100%;
					height: 16rpx;
					background:rgba(247,247,247,1);
					margin-bottom: 30rpx;
				}
				image{
					width:100rpx;
					height: 100rpx;
				}
				.wrapper-bottom-left{
					color:rgba(139,141,147,1);
					font-size: 24rpx;
					.from{
						font-weight: 600;
						font-size:30rpx;
						margin:20rpx 0;
					}
				}
			}
		}
		.btn-wrapper{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 150rpx;
			background: rgba(255,226,38,1);
			box-shadow: 0rpx -2rpx 16rpx 10rpx rgba(255,226,38,1);
			@include flex(space-around);
			button{
				color: #000000;
				background-color: #ffffff;
				width:100px;
				height: 80rpx;
				line-height: 80rpx;
				font-weight: bold;
			}
		}
			
	}
</style>
<style>
	radio .wx-radio-input.wx-radio-input-checked::before{
	   color:#000;
	
	}
</style>